<template>
  <h1>我是子组件</h1>
  <h2>子组件的名字:{{ name }}</h2>
  <button @click="name += '~'">更新子组件名字</button>
</template>
<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from 'vue'
export default {
  nanme: 'Demo',
  setup() {
    const name = ref('Demo')
    console.log('--Demo-setup---')
    onBeforeMount(() => {
      console.log('--Demo-onBeforeMount---')
    })
    onMounted(() => {
      console.log('--Demo-onMounted---')
    })
    onBeforeUpdate(() => {
      console.log('--Demo-onBeforeUpdate---')
    })
    onUpdated(() => {
      console.log('--Demo-onUpdated---')
    })
    onBeforeUnmount(() => {
      console.log('--Demo-onBeforeUnmount---')
    })
    onUnmounted(() => {
      console.log('--Demo-onUnmounted---')
    })
    return {
      name,
    }
  },
  beforeCreate() {
    console.log('--Demo-beforeCreate---')
  },
  created() {
    console.log('--Demo-created---')
  },
  beforeMount() {
    console.log('--Demo-beforeMount---')
  },
  mounted() {
    console.log('--Demo-mounted---')
  },
  beforeUpdate() {
    console.log('--Demo-beforeUpdate---')
  },
  updated() {
    console.log('--Demo-updated---')
  },
  //   beforeDestroy() {
  //     console.log('--Demo-beforeDestroy---')
  //   },
  //   destroyed() {
  //     console.log('--Demo-destroyed---')
  //   },
  beforeUnmount() {
    console.log('--Demo-beforeUnmount---')
  },
  unmounted() {
    console.log('--Demo-unmounted---')
  },
}
</script>
